<template>
  <el-dialog
    top="30px"
    width="800px"
    class="dialog-sm"
    append-to-body
    title="已核算保费"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
    <div v-loading="loading">
      <detail-view :related-id="relatedId"></detail-view>

      <p class="text-muted mt-3 mb-0">核算信息：</p>
      <table class="table table-bordered table-sm text-center">
        <thead>
          <tr>
            <th>核算时间</th>
            <th>应缴时间</th>
            <th>担保费率(%)</th>
            <th>在保余额(万元)</th>
            <th>缴费金额(万元)</th>
          </tr>
        </thead>
        <tbody>
          <template v-for="a in accountings">
            <tr v-if="a.hasCheck" :key="a.id">
              <td>{{ a.check_time }}</td>
              <td>{{ a.due_warrant_date }}</td>
              <td>{{ a.gua_rate }}</td>
              <td>{{ a.left_funds }}</td>
              <td>{{ a.due_warrant_fee }}</td>
            </tr>
            <tr v-else :key="a.id">
              <td>未核算</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
            </tr>
          </template>

          <tr v-if="!loading && !accountings.length">
            <td colspan="5" class="text-center p-3 text-muted">暂无核算信息</td>
          </tr>

          <tr v-else class="bg-light font-weight-bold">
            <td colspan="4">已核算保费金额登记</td>
            <td>{{ totalFunds }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </el-dialog>
</template>

<script>
import { strip } from '@vimi/utils-tool'
import { formatToDay } from '@/common/plugins/tools/date'

import DetailView from '@/bigcredit/views/settle/collect/components/DetailView.vue'
import { CheckStatus } from '@/bigcredit/views/settle/accounting/model'

export default {
  components: {
    DetailView,
  },
  props: {
    visible: Boolean,
    relatedId: String,
  },
  data() {
    return {
      loading: false,
      project: {},
      accountings: [],
    }
  },
  computed: {
    totalFunds() {
      const t = this.accountings.reduce((p, c) => {
        if (c.hasCheck) {
          const v = +(c.due_warrant_fee || 0)
          p += isNaN(v) ? 0 : v
        }
        return p
      }, 0)
      return strip(t)
    },
  },
  watch: {
    visible(val) {
      val && this.getData()
    },
  },
  created() {},
  mounted() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },
    getData() {
      if (!this.relatedId) return

      this.loading = true
      this.getAccounting().finally(() => {
        this.loading = false
      })
    },
    // 核算列表
    getAccounting() {
      return this.$api
        .getData({
          table: 'credit_warrant_fee_year_view',
          params: {
            'customer_related_id.eq': this.relatedId,
          },
          order: {
            // N1check_status: 'desc',
            due_warrant_date: 'asc',
          },
        })
        .then(res => {
          this.accountings = (res.data || []).map(this.dataAdapter)
        })
    },
    dataAdapter(row) {
      row.check_time = formatToDay(row.check_time)
      row.due_warrant_date = formatToDay(row.due_warrant_date)
      row.checkStatus = +(row.check_status || 0)
      row.hasCheck = row.checkStatus === CheckStatus.Finished
      return row
    },
  },
}
</script>
<style lang="scss" scoped></style>
